<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('德育管理-统计')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="report-form">
                <div class="select-list col-sm-offset-1">

                    <ul class="nav nav-tabs">
                        <li role="presentation"><a href="javascript:queryReport(0)">周视图</a></li>
                        <li role="presentation"><a href="javascript:queryReport(1)">月视图</a></li>
                        <li role="presentation"><a href="javascript:queryReport(2)">学期视图</a></li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 search-collapse" id="echarts-content">
           <!-- <div class="echarts" id="echarts-bar-chart"></div>-->
        </div>

    </div>

</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">

    function queryReport(type){
        $.ajax({
            type: "post",
            url:ctx + "school/illegalRecord/getReport",
            data:$.param({'queryType': type}) + '&' + $("#report-form").serialize(),
            async:true,
            dataType: "json",
            success: function(res){
                for (let i = 0; i < res.length; i++) {
                    buildChart(res[i]);
                }
            }
        });
    }

    function buildChart(data){
        var id = "echarts-bar-chart-"+data.grade.id;
        var chartObj = '<div class="echarts" id="'+id+'"></div>';
        $("#echarts-content").append(chartObj);
        var barChart = echarts.init(document.getElementById(id));
        barChart.setOption({
            title: {
                text: data.grade.gradeName +'报表'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['奖励分数', '惩罚分数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.classNameList
            },
            yAxis: {
                type: 'value'
            },
            series: data.series
        });
    }

    $(function() {
        queryReport(0);
    })

</script>
</body>
</html>
